// 示例一：使用useCallback减少页面不必要的重新挂载
// import {useCallback, useState} from 'react'
// const functionMap = new WeakMap()
// let counter = 1
// function UseCallbackHook() {
//     console.log('render')
//     const [search,setSearch] = useState('')
//     const  changeSearch = useCallback((e:React.ChangeEvent<HTMLInputElement>) => {
//         setSearch(e.target.value)
//     },[])
//     if(!functionMap.has(changeSearch)){
//         functionMap.set(changeSearch,counter++)
//     }
//     console.log('函数ID',functionMap.get(changeSearch))
//     return <>
//         <input type="text" value={search} onChange={changeSearch} />
//     </>
// }
import React, { useCallback, useState } from 'react'
const Child = React.memo(({ user, callback }: { user: { name: string; age: number }, callback: () => void }) => {
   console.log('Render Child')
   const styles = {
      color: 'red',
      fontSize: '20px',
   }
   return <div style={styles}>
      <div>{user.name}</div>
      <div>{user.age}</div>
      <button onClick={callback}>callback</button>
   </div>
})

const UseCallbackHook: React.FC = () => {
   const [search, setSearch] = useState('')
   const [user, setUser] = useState({
      name: 'John',
      age: 20
   })
   const childCallback = () => {
      console.log('callback 执行了')
   }
   return <>
      <input type="text" value={search} onChange={e => setSearch(e.target.value)} />
      <Child callback={childCallback} user={user} />
   </>;
};

export default UseCallbackHook;
